<template>
  <div class="hero-container">
    <!-- 背景渐变 -->
    <div class="gradient-bg"></div>

    <!-- 内容区域 -->
    <div class="hero-content">
      <h1 class="tagline">全新版本 · 轻松做自己</h1>
      <h2 class="title">橘事顺利产品</h2>
      <p class="subtitle">跨平台畅聊 · 流畅体验 · 多端统一</p>

      <!-- 平台下载按钮区域 -->
      <div class="platform-buttons">
        <!-- 公众号（仅PC显示，悬浮显示二维码） -->
        <div
            v-if="!isMobile"
            class="platform-btn"
            @mouseenter="hoverPlatform = '公众号'"
            @mouseleave="hoverPlatform = ''"
        >
          <span class="icon">📢</span>
          <span class="label">关注公众号</span>
          <transition name="fade-zoom">
            <div v-if="hoverPlatform === '公众号'" class="qrcode-popup">
              <img
                  src="https://tt-kiku-pic.oss-cn-beijing.aliyuncs.com/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81/qrcode_for_gh_f3a6e83ca7c5_344.jpg"
                  alt="公众号二维码"
                  class="popup-img"
              />
            </div>
          </transition>
        </div>

        <!-- 其他平台 -->
        <div
            v-for="platform in filteredPlatforms"
            :key="platform.name"
            class="platform-btn"
            @mouseenter="!isMobile && platform.showImage && (hoverPlatform = platform.name)"
            @mouseleave="!isMobile && (hoverPlatform = '')"
            @click="handleClick(platform)"
        >
          <span class="icon">{{ platform.icon }}</span>
          <span class="label">{{ platform.name }}</span>

          <!-- PC端悬浮显示二维码 -->
          <transition name="fade-zoom" v-if="platform.showImage && !isMobile">
            <div v-if="hoverPlatform === platform.name" class="qrcode-popup">
              <img :src="platform.img" :alt="platform.name + '下载二维码'" class="popup-img" />
            </div>
          </transition>
        </div>
      </div>

      <!-- 移动端：按钮后面统一追加公众号二维码 -->
      <div v-if="isMobile" class="mobile-follow">
        <img
            class="mobile-follow-img"
            src="https://tt-kiku-pic.oss-cn-beijing.aliyuncs.com/images/%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81/qrcode_for_gh_f3a6e83ca7c5_344.jpg"
            alt="公众号二维码"
        />
        <p class="mobile-follow-text">关注公众号，获取最新动态与下载指引</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from "vue";

export default {
  name: "MultiDownloadCard",
  setup() {
    const hoverPlatform = ref("");
    const isMobile = ref(false);

    // 检测是否为移动端
    onMounted(() => {
      isMobile.value = /Mobi|Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
    });

    const platforms = [
      {
        name: "iOS",
        icon: "🍏",
        img: "",
        url: "https://example.com/download/ios",
        showImage: true,
      },
      {
        name: "Android",
        icon: "🤖",
        img: "",
        url: "https://example.com/download/android",
        showImage: true,
      },
      {
        name: "Windows",
        icon: "🪟",
        url: "https://example.com/download/windows",
        showImage: false,
      },
      {
        name: "macOS",
        icon: "🍎",
        url: "https://example.com/download/macos",
        showImage: false,
      },
    ];

    // 移动端仅显示 iOS 和 Android；PC 显示全部（公众号独立控制）
    const filteredPlatforms = computed(() => {
      return isMobile.value
          ? platforms.filter((p) => p.name === "iOS" || p.name === "Android")
          : platforms;
    });

    const openLink = (url) => {
      if (url) window.open(url, "_blank");
    };

    const handleClick = (platform) => {
      if (isMobile.value) {
        // 移动端点击直接下载 iOS/Android
        openLink(platform.url);
      } else {
        // PC端点击 Windows/macOS 直接下载
        if (platform.name === "Windows" || platform.name === "macOS") {
          openLink(platform.url);
        }
      }
    };

    return {
      hoverPlatform,
      isMobile,
      filteredPlatforms,
      handleClick,
    };
  },
};
</script>

<style scoped>
.hero-container {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gradient-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #6a85b6, #bac8e0, #fbc2eb, #a6c1ee);
  background-size: 300% 300%;
  animation: gradientMove 12s ease infinite;
  z-index: -1;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.hero-content {
  text-align: center;
  max-width: 800px;
  padding: 2rem;
}

.tagline {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  letter-spacing: 2px;
}

.title {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

.subtitle {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.platform-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
}

.platform-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  padding: 0.8rem 1.2rem;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(6px);
}

.platform-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-4px) scale(1.05);
}

.icon {
  font-size: 1.4rem;
}

.label {
  font-size: 1rem;
  font-weight: 500;
}

.qrcode-popup {
  position: absolute;
  top: -160px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  padding: 0.5rem;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.popup-img {
  width: 140px;
  height: 140px;
  display: block;
}

/* 移动端：按钮后面的公众号二维码区域 */
.mobile-follow {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-follow-img {
  width: 140px;
  height: 140px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  background: #fff;
}

.mobile-follow-text {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  color: #fff;
  opacity: 0.95;
}

.fade-zoom-enter-active,
.fade-zoom-leave-active {
  transition: all 0.25s ease;
}

.fade-zoom-enter-from,
.fade-zoom-leave-to {
  opacity: 0;
  transform: scale(0.8);
}

.fade-zoom-enter-to,
.fade-zoom-leave-from {
  opacity: 1;
  transform: scale(1);
}
</style>
